<template>
    <div>
      <el-table :data="videoWatchHistories" style="width: 100%">
        <el-table-column prop="studentName" label="学生姓名"></el-table-column>
        <el-table-column prop="subjectName" label="视频集"></el-table-column>
        <el-table-column prop="videoName" label="章节"></el-table-column>
        <el-table-column prop="progress" label="进度（百分比）"></el-table-column>
      </el-table>
  
      <el-dialog :visible.sync="dialogVisible" title="编辑记录" :close-on-click-modal="false">
        <el-form :model="editedRecord" label-width="80px">
          <el-form-item label="学生ID">
            <el-input v-model="editedRecord.studentId"></el-input>
          </el-form-item>
          <el-form-item label="视频ID">
            <el-input v-model="editedRecord.videoId"></el-input>
          </el-form-item>
          <el-form-item label="进度">
            <el-input v-model="editedRecord.progress"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRecord">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {post} from "../../../api/request";
  export default {
    data() {
      return {
        videoWatchHistories: [], // 视频观看记录列表
        dialogVisible: false, // 是否显示编辑对话框
        editedRecord: { // 正在编辑的记录
          id: null,
          studentId: '',
          videoId: '',
          progress: ''
        },
        videoWatchHistories: [] // 视频观看记录列表
      }
    },
    mounted() {
      // 加载视频观看记录列表
      this.loadVideoWatchHistories();
    },
    methods: {
      // 加载视频观看记录列表
      loadVideoWatchHistories() {
        // 通过 API 获取视频观看记录列表数据，这里假设使用 axios 发送请求
        let that = this;
        post('api/study/videos/getVideoProgress')
          .then(response => {
            console.log('视频观看记录列表:', response);
            that.videoWatchHistories = response.data.resultData;
            console.log('视频观看记录列表:', that.videoWatchHistories);
          })
          .catch(error => {
            console.error('加载视频观看记录列表失败:', error);
          });
      },
      // 显示添加对话框
      showAddDialog() {
        this.dialogVisible = true;
        this.editedRecord = { studentId: '', videoId: '', progress: '' };
      },
      // 处理编辑操作
      handleEdit(row) {
        this.dialogVisible = true;
        this.editedRecord = { ...row }; // 复制一份数据，避免直接修改原数据
      },
      // 处理保存记录操作
      saveRecord() {
        // 保存编辑后的记录，这里假设使用 axios 发送请求
        post('/api/video-watch-histories', this.editedRecord)
          .then(response => {
            this.dialogVisible = false;
            this.loadVideoWatchHistories(); // 重新加载视频观看记录列表
          })
          .catch(error => {
            console.error('保存记录失败:', error);
          });
      },
      // 处理删除操作
      handleDelete(id) {
        // 发送删除请求，这里假设使用 axios
        post(`/api/video-watch-histories/${id}`)
          .then(response => {
            this.loadVideoWatchHistories(); // 重新加载视频观看记录列表
          })
          .catch(error => {
            console.error('删除记录失败:', error);
          });
      }
    }
  }
  </script>